<template>
  <div>
    <comment :hotComments="hotComments" :comments="comments"></comment>
    <mu-infinite-scroll
      :loadingText="loadingText"
      :loading="loading"
      @load="fetchData"
    />
  </div>
</template>

<script lang="ts">
import comment from "../../../components/comment.vue";
import { Vue, Component } from "vue-property-decorator";
import { Route } from "vue-router";
import { CommentInfo } from "@/model/music-info.model";
import { APIType } from "@/api";
@Component({
  components: {
    comment,
  },
})
export default class MvCommentComponent extends Vue {
  total = 0;
  comments: CommentInfo[] = [];
  hotComments: CommentInfo[] = [];
  loading = false;
  loadingText = "努力加载中...";

  $api: APIType;
  $route: Route;

  mounted() {
    this.fetchData();
  }
  fetchData() {
    const offset = this.comments.length;
    this.loading = true;
    this.$api
      .getCommentByType("mv", this.$route.params.id, offset, 20)
      .then((res) => {
        // 因为如果offset不是0的话，返回的数据就没有hotComment了，所以要进行判断
        this.hotComments = res?.hotComments || this.hotComments;
        if (res?.comments?.length) {
          this.total = res.total;
          this.comments = [...this.comments, ...res.comments];
        }
        this.loading = false;
      });
  }
}
</script>

<style></style>
